.result-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;

  .filter-container {
    width: 250px;
    height: 1200px;
    display: none;
    flex-shrink: 0;
    margin-right: 30px;
    background-color: #f1f1f1;
    opacity: 1;
    transition-property: opacity, transform, width, margin-right;
    transition-duration: 500ms;
  }

  .result-list {
    width: 100%;
    transition-property: width;
    transition-duration: 500ms;

    .result-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 20px 10px;
      background-color: #fff;
      border-radius: 8px;
      cursor: pointer;
      transition-property: background-color, padding;
      transition-duration: 300ms;

      ::v-deep .v-avatar {
        width: 140px !important;
        height: 140px !important;
        flex-shrink: 0;
        background-color: #f1f1f1;
        transition-property: width, height, filter;
        transition-duration: 500ms;
      }

      .item-info {
        width: 100%;
        padding: 0 0 0 20px;

        .item-title {
          font-size: 18px;
          font-weight: bold;
          padding-bottom: 8px;
        }

        .item-desc {
          font-size: 14px;

          div:last-child {
            margin-top: 8px;
            color: #555;
            display: -webkit-box !important;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
          }
        }

        .item-detail {
          width: 100%;
          padding-top: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: initial;

          .teacher {
            &::before {
              content: '';
              margin: 0;
            }

            &::after {
              content: '';
              margin-right: 15px;
            }
          }

          span {
            font-size: 13px;
            color: #888;

            &::before {
              content: '●';
              font-size: 12px;
              margin: 0 4px;
            }

            &:nth-child(2)::before {
              content: '';
              margin: 0;
            }
          }
        }
      }

      .item-price {
        width: 80px;
        flex-shrink: 0;
        text-align: right;

        .price__current {
          font-size: 20px;
          font-weight: bold;
          color: #1e88e5;
          transition-duration: 300ms;
          transition-property: font-size;
        }

        .price__original {
          font-size: 14px;
          color: #888;
          text-decoration-color: #888;
          text-decoration-line: line-through;
          text-decoration-style: solid;
          text-decoration-thickness: auto;
        }
      }

      &:hover {
        background-color: #f6f6f6;

        .item-image {
          filter: brightness(.8);
        }
      }
    }
  }

  .filter-container__hidden {
    width: 0;
    margin-right: 0;
    opacity: 0;
    transform: translateX(-250px);
  }

  @media screen and (min-width: 900px) and (max-width: 1200px) {
    .result-list {
      .result-item {
        padding: 15px 10px;

        ::v-deep .v-avatar {
          width: calc(140px * 0.9) !important;
          height: calc(140px * 0.9) !important;
        }

        .item-info {
          .item-title {
            font-size: 17px;
          }

          .item-desc {
            -webkit-line-clamp: 2;
          }

          .item-detail {
            width: 100%;
            padding-top: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: initial;

            .teacher {
              &::before {
                content: '';
                margin: 0;
              }

              &::after {
                content: '';
                margin-right: 15px;
              }
            }

            span {
              font-size: 13px;
              color: #888;

              &::before {
                content: '●';
                font-size: 12px;
                margin: 0 4px;
              }

              &:nth-child(2)::before {
                content: '';
                margin: 0;
              }
            }
          }
        }

        .item-price {
          width: 60px;

          .price__current {
            font-size: 17px;
          }

          .price__original {
            font-size: 13px;
          }
        }
      }
    }
  }

  @media screen and (min-width: 600px) and (max-width: 900px) {
    .result-list {
      .result-item {
        padding: 15px 10px;

        ::v-deep .v-avatar {
          width: calc(140px * 0.8) !important;
          height: calc(140px * 0.8) !important;
        }

        .item-info {
          .item-title {
            font-size: 17px;
          }

          .item-desc {
            -webkit-line-clamp: 2;
          }

          .item-detail {
            padding-top: 6px;
          }
        }

        .item-price {
          width: 60px;

          .price__current {
            font-size: 17px;
          }

          .price__original {
            font-size: 13px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 600px) {
    .result-list {
      .result-item {
        padding: 10px 10px;

        ::v-deep .v-avatar {
          width: 120px !important;
          height: 120px !important;
        }

        .item-info {
          .item-title {
            font-size: 16px;
          }

          .item-desc {
            font-size: 13px;
            -webkit-line-clamp: 2;
          }

          .item-detail {
            padding-top: 6px;

            span {
              font-size: 12px;
              color: #888;

              &::before {
                content: '●';
                font-size: 10px;
                margin: 0 2px;
              }

              &:first-child::before {
                content: '';
                margin: 0;
              }
            }
          }
        }

        .item-price {
          width: 60px;

          .price__current {
            font-size: 16px;
          }

          .price__original {
            font-size: 12px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 450px) {
    .result-list {
      .result-item {
        ::v-deep .v-avatar {
          width: 80px !important;
          height: 80px !important;
        }
      }
    }
  }
}

::v-deep .v-navigation-drawer {
  display: none;
  transition-duration: 500ms;
}